<div>
  <button
    #popover="lvPopover"
    lv-popover
    [lvPopoverHeader]="headerTemplate"
    [lvPopoverContent]="contentTemplate"
    [lvPopoverFooter]="footerTemplate"
    lvPopoverTheme="light"
    lvPopoverTrigger="click"
    [lvPopoverBeforeOpen]="beforeOpen"
    (lvPopoverExternalTrigger)="externalClose()"
    [lvPopoverScrollToClose]="false"
    lv-button
  >
    Click me
  </button>

  <ng-template #headerTemplate>
    <div style="height: 24px;line-height: 24px;">
      <i lv-icon="icon-account" style="vertical-align:initial"></i>
      <span style="font-size:18px; color:blueviolet;margin-left: 8px;">Title</span>
    </div>
  </ng-template>
  <ng-template #contentTemplate>
    <div style="margin:16px 0; height: 150px; overflow: scroll">
      <div>
        <i lv-icon="lv-icon-status-succeed"></i>
        <span style="margin-left: 8px;">Content</span>
      </div>

      <lv-checkbox-group [(ngModel)]="selected" style="margin-top:8px;">
        <lv-group lvDirection="vertical">
          <lv-checkbox [lvValue]="'item001'">Item 001</lv-checkbox>
          <lv-checkbox [lvValue]="'item002'">Item 002</lv-checkbox>
          <lv-checkbox [lvValue]="'item003'">Item 003</lv-checkbox>
          <lv-checkbox [lvValue]="'item004'">Item 004</lv-checkbox>
          <lv-checkbox [lvValue]="'item005'">Item 005</lv-checkbox>
          <lv-checkbox [lvValue]="'item006'">Item 006</lv-checkbox>
          <lv-checkbox [lvValue]="'item007'">Item 007</lv-checkbox>
          <lv-checkbox [lvValue]="'item008'">Item 008</lv-checkbox>
          <lv-checkbox [lvValue]="'item009'">Item 009</lv-checkbox>
          <lv-checkbox [lvValue]="'item0010'">Item 010</lv-checkbox>
        </lv-group>
      </lv-checkbox-group>
    </div>
  </ng-template>
  <ng-template #footerTemplate>
    <button lv-button [lvLoading]="loading" lvLoadingText="loading" lvType="primary" (click)="confirm()">
      Confirm
    </button>
    <button lv-button (click)="cancel()">Cancel</button>
  </ng-template>
</div>

<style>
  button {
    margin: 0 4px;
  }
  lv-checkbox {
    margin: 4px 0;
  }
</style>
